{% extends "base.html" %}
{% block title %}
    文件管理
{% endblock %}
{% block css %}
    <style>
        .font-size-xl {
            font-size: 20px;
        }

        .font-size-ml {
            font-size: 18px;
        }

        .font-size-sm {
            font-size: 16px;
        }

        .font-size-xs {
            font-size: 14px;
        }
    </style>
{% endblock %}
{% block content %}
    <h1 id="$s2"></h1>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>文件管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li class="active">
                    <strong>文件管理</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="form-group">
                            <div class="input-group" style="width: 45%">
                                <input type="text" value="/" name="path" class="input form-control">
                                <input type="hidden" value="/" id="last-dir">
                                <span class="input-group-btn">
                                <button type="button" onclick="go_dirs()" class="btn btn btn-primary"> <i
                                        class="fa fa-arrow-up"></i></button>
                                  </span>
                            </div>
                        </div>
                        <div class="clients-list">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a data-toggle="tab" href="#tab-1" aria-expanded="true">
                                        <i class="fa fa-th-list"></i>
                                    </a>
                                </li>
                                <li class="">
                                    <a data-toggle="tab" href="#tab-2" aria-expanded="false">
                                        <i class="fa fa-th-large"></i>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="slimScrollDiv">
                                        <div class="ibox-content" style="background-color: #e3e5e0">
                                            <a class="btn btn-white btn-bitbucket">
                                                <i class="fa fa-upload"></i> 上传
                                            </a>
                                            <a class="btn btn-white btn-bitbucket">
                                                <i class="fa fa-download"></i> 下载
                                            </a>
                                            <button class="btn btn-white btn-bitbucket" onclick="newFile()">
                                                <i class="fa fa-file-o"></i> 新建文件
                                            </button>
                                            <button class="btn btn-white btn-bitbucket" onclick="newFolder()">
                                                <i class="fa fa-folder-o"></i> 新建目录
                                            </button>
                                            <a class="btn btn-white btn-bitbucket" onclick="backDir()">
                                                <i class="fa fa-arrow-left"></i>返回上一级
                                            </a>
                                            <button class="btn btn-white btn-bitbucket" onclick="go_dirs()">
                                                <i class="fa fa-refresh"></i>
                                            </button>
                                            <a class="btn btn-white btn-bitbucket" onclick="click_dir('/')">
                                                <i class="fa fa-home"></i>返回根目录
                                            </a>
                                            <button onclick="cut_or_copy_file()" class="btn btn-white btn-bitbucket"
                                                    style="display: none"
                                                    id="cut_or_copy">
                                                <input type="hidden" id="cp_type">
                                                <input type="hidden" id="cp_path">
                                                <span style="color: red">粘贴</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="slimScrollDiv"
                                         style="width: auto;">
                                        <div class="full-height-scroll"
                                             style="width: auto;">
                                            <div class="table-responsive" style="height: 540px;">
                                                <table class="table table-hover" style="table-layout: fixed">
                                                    <thead>
                                                    <tr>
                                                        <th style="width: 20%;">文件名</th>
                                                        <th class="text-center">文件大小</th>
                                                        <th class="text-center">时间</th>
                                                        <th class="text-center">权限</th>
                                                        <th class="text-center">所有者</th>
                                                        <th class="text-center" style="width: 25%;">操作</th>
                                                    </tr>
                                                    </thead>
                                                    <!-- style="overflow-y: scroll;overflow-x:hidden;width: 100%;" -->
                                                    <tbody id="tbody1"
                                                           style="overflow-y: scroll;overflow-x:hidden;width: 100%;"></tbody>
                                                    <tfoot>
                                                    <tr>
                                                        <th style="width: 20%;">文件名</th>
                                                        <th class="text-center">文件大小</th>
                                                        <th class="text-center">时间</th>
                                                        <th class="text-center">权限</th>
                                                        <th class="text-center">所有者</th>
                                                        <th class="text-center" style="width: 20%;">操作</th>
                                                    </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab-2" class="tab-pane">
                                    <div class="slimScrollDiv"
                                         style="position: relative; overflow: hidden; width: auto; height: 100%;">
                                        <div class="full-height-scroll"
                                             style="overflow: hidden; width: auto; height: 100%;">
                                            <div class="table-responsive">
                                                <table class="table table-striped table-hover">
                                                    <tbody>
                                                    <tr>
                                                        <td><a data-toggle="tab" href="#company-1" class="client-link"
                                                               aria-expanded="false">Tellus Institute</a></td>
                                                        <td>Rexton</td>
                                                        <td><i class="fa fa-flag"></i> Angola</td>
                                                        <td class="client-status"><span
                                                                class="label label-primary">Active</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><a data-toggle="tab" href="#company-2" class="client-link"
                                                               aria-expanded="false">Velit Industries</a></td>
                                                        <td>Maglie</td>
                                                        <td><i class="fa fa-flag"></i> Luxembourg</td>
                                                        <td class="client-status"><span
                                                                class="label label-primary">Active</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><a data-toggle="tab" href="#company-3" class="client-link"
                                                               aria-expanded="false">Art Limited</a></td>
                                                        <td>Sooke</td>
                                                        <td><i class="fa fa-flag"></i> Philippines</td>
                                                        <td class="client-status"></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="slimScrollBar"
                                             style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px;"></div>
                                        <div class="slimScrollRail"
                                             style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block script %}
    <script src="/static/js/cookies.js"></script>
    <script>
        var csrf = "{{ csrf_token }}";
        // 进入页面默认展示 "/"
        $(function () {
            let root_path = getCookie("root_path");
            if (root_path) {
                $('[name="path"]').val(root_path);
                $("#tbody1").empty();
                get_dirs(root_path, csrf)
            } else {
                let path = $('[name="path"]').val();
                $("#tbody1").empty();
                get_dirs(path, csrf)
            }
        });

        function last_dir(path) {
            let rs_path = undefined;
            let p_list = path.split("/");
            if (p_list.length === 1) {
                // 如果只剩一个了就使用这个
                rs_path = p_list[0] + "/"
            } else {
                // 删除左后一个，再次拼接成字符串路径
                p_list.pop();
                rs_path = p_list.join("/");
                if (p_list.length === 1) {
                    rs_path += "/"
                }
            }
            return rs_path
        }

        // 点击的时候 传入一个地址，获取这个地址的文件列表
        function click_dir(path) {
            // 写入cookie
            setCookie('root_path', path);
            $("#tbody1").empty();
            // 记录本次到上一次的
            get_dirs(path, csrf);
            $('[name="path"]').val(path);
        }

        // 点击返回上一页
        function backDir() {
            let path = $('[name="path"]').val();
            // 得到一个列表，然后删除最后一个元素
            path = last_dir(path);
            console.log(path);
            $("#tbody1").empty();
            // 记录本次到上一次的
            get_dirs(path, csrf);
            // 写入cookie
            setCookie('root_path', path);
            $('[name="path"]').val(path)
        }

        // 点击后自动获取地址栏，获取文件列表
        function go_dirs() {
            let p = $('[name="path"]');
            $("#tbody1").empty();
            let path = p.val();

            // 记录本次到上一次的
            $("#last-dir").val(path);

            // 获取
            get_dirs(path, csrf);
            // 写入cookie
            setCookie('root_path', path);
            p.val(path);
        }

        // 获取
        function get_dirs(path, csrf) {
            $.ajax({
                headers: {"X-CSRFToken": csrf},
                url: "/dir/api/v1/get-dirs/",
                type: "POST",
                data: {"path": JSON.stringify(path)},
                success: function (result) {
                    // 返回200 的时候遍历
                    if (result.code === 200) {
                        $.each(result.data, function (i, obj) {
                            let html = undefined;
                            // 如果是文件夹，一种展示方法
                            if (obj.is_folder) {
                                // 文件加
                                html = '<tr>' +
                                    '<td><a class="btn-xl" onclick="click_dir(\'' + obj.path + '\')">' +
                                    '<i class="fa ' + get_img(null, true) + ' fa-2x"></i>' +
                                    '<span class="font-size-sm font-bold"> ' + obj.name + '</span></a></td>' +
                                    ' <td class="text-center"><a class="btn" id="' + obj.name +
                                    '_path" onclick="get_path_size(\'' + obj.name + '\',\'' + obj.path + '\')">点击计算大小</a></td>' +
                                    ' <td class="text-center"> ' + obj.ctime + '</td>' +
                                    ' <td class="text-center"> ' + obj.chmod + '</td>' +
                                    ' <td class="text-center">root</td>' + get_buttons(obj.name, obj.path, true, chmod = obj.chmod) + '</tr>';
                                $("#tbody1").append(html)
                            } else {
                                // 如果是文件，一种展示方法
                                html = '<tr>' +
                                    '<td><i class="fa ' + get_img(obj.name) + ' fa-2x"></i>' +
                                    '<span class="font-size-sm font-bold"> ' + obj.name + '</span></td>' +
                                    '<td class="text-center"><a class="btn"> ' + get_size(obj.size) + '</a></td>' +
                                    '<td class="text-center"> ' + obj.ctime + '</td>' +
                                    '<td class="text-center"> ' + obj.chmod + '</td>' +
                                    '<td class="text-center">root</td>' + get_buttons(obj.name, obj.path, false, chmod = obj.chmod) + '</tr>';
                                $("#tbody1").append(html)
                            }

                        })
                    } else {
                        swal("错误", result.error, "error")
                    }
                }
            })
        }
    </script>
    <script>
        // 对文件名进行分割
        function splitFileName(text) {
            var pattern = /\.{1}[a-z]{1,}$/;
            if (pattern.exec(text) !== null) {
                return [pattern.exec(text)[0], text.slice(0, pattern.exec(text).index)]
            } else {
                return text;
            }
        }

        // 对 展示图标的操作
        function get_img(name, is_folder = false) {
            let img = {
                "floder": "fa-folder-o",
                "file": "fa-file-o",
                "zip": "fa-file-zip-o",
                "image": "fa-file-image-o",
                "ppt": "fa-file-powerpoint-o",
                "word": "fa-file-word-o",
                "pdf": "fa-file-pdf-o",
                "excel": "fa-file-excel-o",
                "video": "fa-file-movie-o",
                "code": "fa-file-code-o",
                "git": "fa-git"
            };
            if (is_folder) {
                return img.floder
            } else {
                let names = splitFileName(name);
                // 如果不是文件夹,判断类型
                let hz = names[0];
                let bak = img.file;
                if (".zip" === hz || ".tar" === hz || ".gz" === hz) {
                    bak = img.zip;
                } else if (".png" === hz || ".jpeg" === hz || ".jpg" === hz || ".gif" === hz) {
                    bak = img.image;
                } else if (".doc" === hz || ".docx" === hz) {
                    bak = img.word;
                } else if (".ppt" === hz || ".pptx" === hz) {
                    bak = img.ppt;
                } else if (".xls" === hz || ".csv" === hz || ".xlsx" === hz) {
                    bak = img.excel;
                } else if (".pdf" === hz) {
                    bak = img.pdf;
                } else if (".mp4" === hz || ".avi" === hz) {
                    bak = img.video;
                } else if (".html" === hz || ".py" === hz || ".php" === hz || ".java" === hz || ".conf" === hz) {
                    bak = img.code;
                }
                return bak
            }
        }

        // 对问价大小展示的操作
        function get_size(size) {
            // 通过文件大小判断显示 kb mb gb
            if (((size / 1024) / 1000) / 1000 > 1) {
                kb = parseInt(size / 1024);
                mb = kb / 1000;
                gb = mb / 1000;
                return gb.toFixed(2) + " GB"
            } else if ((size / 1024) / 1000 > 1) {
                kb = parseInt(size / 1024);
                mb = kb / 1000;
                return mb.toFixed(2) + " MB"
            } else {
                kb = parseInt(size / 1024);
                return kb.toFixed(2) + " kb"
            }
        }

        // 对文件类行的按钮展示操作
        function get_buttons(name, path, is_folder = false, chmod = "000") {
            let copy = '<button class="btn btn-primary btn-xs" onclick="cut_file(\'' + path + '\')"><i class="fa fa-copy"></i> 复制</button> ';
            let cut = '<button class="btn btn-success btn-xs" onclick="cut_file(\'' + path + '\')"><i class="fa fa-cut"></i> 剪切</button> ';
            let edit = '<button class="btn btn-primary btn-xs"><i class="fa fa-pencil-square"></i> 编辑</button> ';
            let ys = '<button class="btn btn-warning btn-xs" onclick="compression(\'' + path + '\')"><i class="fa fa-file-zip-o"></i> 压缩</button> ';
            let jy = '<button class="btn btn-warning btn-xs" onclick="jieya(\'' + path + '\')"><i class="fa fa-file-zip-o"></i> 解压</button> ';
            let qx = '<button class="btn btn-info btn-xs" onclick="SetChmod(\'' + name + '\',\'' + chmod + '\')"><i class="fa fa-info"></i> 权限</button> ';
            let del = '<button class="btn btn-danger btn-xs" onclick="delFile(\'' + path + '\')"><i class="fa fa-trash-o"></i></button>';
            let preview = '<button class="btn btn-primary btn-xs" onclick="imgShow(\'' + path + '\')"><i class="fa fa-copy"></i> 预览</button> ';
            if (is_folder) {
                // 如果是文件夹
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            }

            // 如果是文件
            let names = splitFileName(name);
            // 如果不是文件夹,判断类型
            let hz = names[0];
            if (".zip" === hz || ".tar" === hz || ".gz" === hz) {
                return '<td>' + copy + cut + jy + qx + del + '</td>'
            } else if (".png" === hz || ".jpeg" === hz || ".jpg" === hz || ".gif" === hz) {
                return '<td>' + copy + cut + ys + preview + qx + del + '</td>'
            } else if (".doc" === hz || ".docx" === hz) {
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            } else if (".ppt" === hz || ".pptx" === hz) {
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            } else if (".xls" === hz || ".csv" === hz || ".xml" === hz) {
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            } else if (".pdf" === hz) {
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            } else if (".mp4" === hz || ".avi" === hz) {
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            } else if (hz === ".iso" || hz === ".exe" || hz === ".xmind" || hz === ".lnk") {
                return '<td>' + copy + cut + ys + qx + del + '</td>'
            } else {
                // if (".html" === hz || ".py" === hz || ".php" === hz || ".java" === hz || ".conf" === hz)
                return '<td>' + copy + cut + edit + ys + qx + del + '</td>'

            }


        }

        // 获取文件大小
        function get_path_size(name, path) {
            let loadT = layer.msg('正在计算目录大小,请稍候...', {icon: 16, time: 0, shade: [0.3, '#000']});
            // name 用来渲染，path 用于请求
            $.ajax({
                headers: {"X-CSRFToken": csrf},
                url: "/dir/api/v1/get-size/",
                type: "POST",
                data: {"path": path},
                success: function (result) {
                    if (result.code === 200) {
                        // 成功
                        layer.close(loadT);
                        let id = name + "_path";
                        $(document.getElementById(id)).text(get_size(result.data));
                    } else {
                        // 错误
                        layer.close(loadT);
                        swal("失败", "你没有检查此文件的权限", "error")
                    }
                }, error: function () {
                    layer.close(loadT);
                    swal("失败", "服务器出错，请检查服务器连接", "error")
                }
            })
        }

    </script>
    <script>
        // 剪切
        function cut_file(path) {
            // 传入一个路径，然后放到上面，
            // 点击的时候检查当前路径，然后再后台执行
            $("#cut_or_copy").show();
            $("#cp_type").val("cut");
            $("#cp_path").val(path)
        }

        // 复制
        function copy_file(path) {
            // 传入一个路径，然后放到上面，
            // 点击的时候检查当前路径，然后再后台执行
            $("#cut_or_copy").show();
            $("#cp_type").val("copy");
            $("#cp_path").val(path)
        }

        // 复制或剪切具体的函数
        function cut_or_copy_file() {
            let tp = $("#cp_type").val();
            if (tp === "cut") {
                let cut_path = $('[name="path"]').val();
                let file_path = $("#cp_path").val();
                //当前路径 和现在的路径一样，就不执行
                if (cut_path === file_path) {
                    return false
                } else {
                    let loadT = layer.msg('正在剪切，请稍后...', {icon: 16, time: 0, shade: [0.3, '#000']});
                    // 如果不一样，进行剪切
                    $.ajax({
                        headers: {"X-CSRFToken": csrf},
                        url: "/dir/api/v1/move/",
                        type: "POST",
                        data: {"old_path": file_path, "new_path": cut_path},
                        success: function (result) {
                            if (result.code === 200) {
                                // 成功l
                                layer.close(loadT);
                                swal("剪切", "粘贴成功", "success");
                                // 把剪切去掉，然后清空
                                $("#cut_or_copy").hide();
                                $("#cp_type").val("");
                                $("#cp_path").val("");
                                // 成功之后要清空刷新
                                go_dirs()
                            } else {
                                // 错误
                                layer.close(loadT);
                                swal("失败", result.error, "error")
                            }
                        }, error: function () {
                            layer.close(loadT);
                            swal("失败", "服务器出错，请检查服务器连接", "error")
                        }
                    })
                }

            } else {
                // 执行复制
                let loadT = layer.msg('正在复制，请稍后...', {icon: 16, time: 0, shade: [0.3, '#000']});
                // 如果不一样，进行复制
                $.ajax({
                    headers: {"X-CSRFToken": csrf},
                    url: "/dir/api/v1/copy/",
                    type: "POST",
                    data: {"old_path": file_path, "new_path": cut_path},
                    success: function (result) {
                        if (result.code === 200) {
                            // 成功l
                            layer.close(loadT);
                            swal("复制", "粘贴成功", "success");
                            // 把剪切去掉，然后清空
                            $("#cut_or_copy").hide();
                            $("#cp_type").val("");
                            $("#cp_path").val("");
                            // 成功之后要清空刷新
                            go_dirs()
                        } else {
                            // 错误
                            layer.close(loadT);
                            swal("失败", result.error, "error")
                        }
                    }, error: function () {
                        layer.close(loadT);
                        swal("失败", "服务器出错，请检查服务器连接", "error")
                    }
                })
            }
        }

        // 解压弹窗
        function jieya(root_path) {
            let jy_path = last_dir(root_path);
            var cw = layer.open({
                <!--在此处加载csrf_token-->
                type: 1,
                area: "600px",
                title: "解压",
                closeBtn: 2,
                shift: 5,
                shadeClose: false,
                content: '<div class="main form-horizontal"">\
                <div class="form-group">\
                    <label for="idc_contact" class="col-sm-2 control-label">文件路径</label>\
                    <div class="col-sm-6">\
                    <input type="text" class="form-control" id="jy_file_path" value="' + root_path + '"></div>\
                </div>\
                <div class="form-group">\
                    <label for="idc_contact" class="col-sm-2 control-label">解压路径</label>\
                    <div class="col-sm-6">\
                    <input type="text" class="form-control" id="jy_path" value="' + jy_path + '"></div>\
                </div>\
                <div class="form-group">\
                    <label for="idc_contact" class="col-sm-2 control-label">解压密码</label>\
                    <div class="col-sm-6">如果没有可以不填\
                    <input type="text" class="form-control" id="file_pwd"></div>\
                </div>\
                <div class="form-group" style="margin-left:30px;"><button type="button" class="btn btn-danger btn-sm" onclick="layer.closeAll()">取消</button> <button type="button" onclick="unZip()" class="btn btn-success btn-sm">确定</button></div></div>'
            })
        }

        // 具体执行
        function unZip() {
            let file_path = $("#jy_file_path").val();
            let jy_path = $("#jy_path").val();
            let file_pwd = $("#file_pwd").val();
            if (file_path && jy_path) {
                layer.closeAll();
                // 执行压缩
                let loadT = layer.msg('正在解压中，请稍后...', {icon: 16, time: 0, shade: [0.3, '#000']});
                $.ajax({
                    headers: {"X-CSRFToken": csrf},
                    url: "/dir/api/v1/unzip/",
                    type: "POST",
                    data: {"file_path": file_path, "jy_path": jy_path, "file_pwd": file_pwd},
                    success: function (result) {
                        if (result.code === 200) {
                            // 成功l
                            layer.close(loadT);
                            swal("解压成功", "已经解压到指定文件夹", "success");
                            // 成功之后要清空刷新
                            go_dirs()
                        } else {
                            // 错误
                            layer.close(loadT);
                            swal("失败", result.error, "error")
                        }
                    }, error: function () {
                        layer.close(loadT);
                        swal("失败", "服务器出错，请检查服务器连接", "error")
                    }
                })
            } else {
                layer.closeAll();
                swal("失败", "缺少参数", "error")
            }
        }

        // 压缩弹窗
        function compression(path) {
            // 打开弹窗
            let ys_path = last_dir(path);
            var cw = layer.open({
                <!--在此处加载csrf_token-->
                type: 1,
                area: "600px",
                title: "压缩",
                closeBtn: 2,
                shift: 5,
                shadeClose: false,
                content: '<div class="main form-horizontal"">\
                <div class="form-group">\
                    <label class="col-sm-2 control-label">压缩类型</label>\
                    <div class="col-sm-6">\
                    <select class="form-control" id="ys_type">\
                        <option value="tar">tar</option>\
                        <option value="gz">gz</option>\
                        <option value="zip">zip</option>\
                    </select>\
                </div></div>\
                <div class="form-group">\
                    <label class="col-sm-2 control-label">文件路径</label>\
                    <div class="col-sm-6">\
                    <input type="text" class="form-control" id="ys_file_path" value="' + path + '"></div>\
                </div>\
                <div class="form-group">\
                    <label class="col-sm-2 control-label">压缩路径</label>\
                    <div class="col-sm-6">\
                   <button onclick="select_dirs()"><i class="fa fa-folder-open"></i></button>\
                    <input type="text" class="form-control" id="ys_path" value="' + ys_path + '"></div>\
                </div>\
                <div class="form-group" style="margin-left:30px;"><button type="button" class="btn btn-danger btn-sm" onclick="layer.closeAll()">取消</button> <button type="button" onclick="zip()" class="btn btn-success btn-sm">确定</button></div></div>'
            })
        }

        function zip() {
            let file_path = $("#ys_file_path").val();
            let ys_path = $("#ys_path").val();
            let type = $('#ys_type option:selected').val();
            if (file_path && ys_path) {
                layer.closeAll();
                // 执行压缩
                let loadT = layer.msg('正在压缩中，请稍后...', {icon: 16, time: 0, shade: [0.3, '#000']});
                $.ajax({
                    headers: {"X-CSRFToken": csrf},
                    url: "/dir/api/v1/zip/",
                    type: "POST",
                    data: {"file_path": file_path, "ys_path": ys_path, "type": type},
                    success: function (result) {
                        if (result.code === 200) {
                            // 成功l
                            layer.close(loadT);
                            swal("压缩成功", "压缩文件已经放至指定文件夹", "success");
                            $("#tbody1").empty();
                            // 成功之后要清空刷新
                            go_dirs()
                        } else {
                            // 错误
                            layer.close(loadT);
                            swal("失败", result.error, "error")
                        }
                    }, error: function () {
                        layer.close(loadT);
                        swal("失败", "服务器出错，请检查服务器连接", "error")
                    }
                })
            } else {
                layer.closeAll();
                swal("失败", "缺少参数", "error")
            }
        }

        // 显示快速查找的操作页面,返回值 选择的路径
        function select_dirs() {
            let path = $("#ys_path").val();
            var cw2 = layer.open({
                <!--在此处加载csrf_token-->
                type: 1,
                area: "600px",
                title: "选择",
                closeBtn: 2,
                shift: 5,
                shadeClose: false,
                content: '<div class="main form-horizontal">\
                <div class="form-group">\
                <div class="input-group" style="margin-left:30px;margin-top:10px;width:300px;">\
                <input type="text" value="/" name="path" class="input form-control">\
                <input type="hidden" value="/" id="last-dir">\
                <span class="input-group-btn">\
                <button type="button" onclick="go_dirs()" class="btn btn btn-primary"> <i\
                class="fa fa-arrow-up"></i></button></span>\
                </div>\
                <div style="margin-left:30px;">\
                <button class="btn btn-sm btn-primary">返回上一级</button>\
                <button class="btn btn-sm btn-warring">返回根目录</button>\
                <button class="btn btn-sm btn-success">新建文件夹</button></div>\
                <div style="font-size:12px;height:500px;">\
                <ul id="select-dirs" style="overflow-y: scroll;overflow-x:hidden;width: 100%;list-style:none;">\
                </ul></div>\
                </div>\
                <div class="form-group" style="margin-left:30px;"> <button type="button" class="btn btn-success btn-sm">确定</button></div></div>'
            });

            // 创建玩窗口，现在初始化
            $.ajax({
                headers: {"X-CSRFToken": csrf},
                url: "/dir/api/v1/get-dirs/",
                type: "POST",
                data: {"path": JSON.stringify(path)},
                success: function (result) {
                    // 返回200 的时候遍历
                    if (result.code === 200) {
                        $.each(result.data, function (i, obj) {
                            let html = undefined;
                            // 如果是文件夹，一种展示方法
                            if (obj.is_folder) {
                                // 文件加
                                html = '<li><a class="btn-xl">' +
                                    '<i class="fa ' + get_img(null, true) + ' fa-2x"></i>' +
                                    '<span class="font-size-sm font-bold"> ' + obj.name + '</span></a></li>';
                                $("#select-dirs").append(html)
                            } else {
                                // 如果是文件，一种展示方法
                                html = '<li><i class="fa ' + get_img(obj.name) + ' fa-2x"></i>' +
                                    '<span class="font-size-sm font-bold"> ' + obj.name + '</span>' +
                                    '</li>';
                                $("#select-dirs").append(html)
                            }

                        })
                    } else {
                        swal("错误", result.error, "error")
                    }
                }
            });
        }
    </script>
    <script>
        function newFile() {
            // 打开一个窗口，
            var cw = layer.open({
                <!--在此处加载csrf_token-->
                type: 1,
                area: "600px",
                title: "新建文件",
                closeBtn: 2,
                shift: 5,
                shadeClose: false,
                content: '<div class="main form-horizontal"">\
                <div class="form-group">\
                    <label for="idc_contact" class="col-sm-2 control-label">文件名</label>\
                    <div class="col-sm-6">\
                    <input type="text" class="form-control" id="n-file_name" style="width:200px;"></div>\
                </div>\
                <div class="form-group" style="margin-left:30px;"><button type="button" class="btn btn-danger btn-sm" onclick="layer.closeAll()">取消</button> <button type="button" id="n-file" class="btn btn-success btn-sm">确定</button></div></div>'
            });
            $("#n-file").click(function () {
                let path = $('[name="path"]').val();
                let name = $("#n-file_name").val();
                $.ajax({
                    headers: {"X-CSRFToken": csrf},
                    url: "/dir/api/v1/newfile/",
                    type: "POST",
                    data: {"path": path, "file_name": name},
                    success: function (result) {
                        // 返回200 的时候遍历
                        if (result.code === 200) {
                            layer.closeAll();
                            $("#tbody1").empty();
                            // 获取
                            get_dirs(path, csrf);
                        } else {
                            swal("错误", result.error, "error")
                        }
                    }
                });

            });
        }

        function newFolder() {
            // 打开一个窗口，
            var cw = layer.open({
                <!--在此处加载csrf_token-->
                type: 1,
                area: "600px",
                title: "新建文件夹",
                closeBtn: 2,
                shift: 5,
                shadeClose: false,
                content: '<div class="main form-horizontal"">\
                <div class="form-group">\
                    <label for="idc_contact" class="col-sm-2 control-label">文件夹名</label>\
                    <div class="col-sm-6">\
                    <input type="text" class="form-control" id="n-folder_name"></div>\
                </div>\
                <div class="form-group" style="margin-left:30px;"><button type="button" class="btn btn-danger btn-sm" onclick="layer.closeAll()">取消</button> <button type="button" id="n-folder" class="btn btn-success btn-sm">确定</button></div></div>'
            });
            $("#n-folder").click(function () {
                let path = $('[name="path"]').val();
                let name = $("#n-folder_name").val();
                $.ajax({
                    headers: {"X-CSRFToken": csrf},
                    url: "/dir/api/v1/newfolder/",
                    type: "POST",
                    data: {"path": path, "folder_name": name},
                    success: function (result) {
                        // 返回200 的时候遍历
                        if (result.code === 200) {
                            layer.closeAll();
                            $("#tbody1").empty();
                            // 获取
                            get_dirs(path, csrf);
                        } else {
                            swal("错误", result.error, "error")
                        }
                    }
                });

            });
        }

        function SetChmod(fileName, chmod = "000") {
            layer.open({
                type: 1,
                closeBtn: 2,
                title: '设置权限 [' + fileName + ']',
                area: '400px',
                shadeClose: false,
                content: '<div class="main form-horizontal">' +
                    '<div class="form-group">' +
                    '<label class="col-sm-2 control-label">所有者</label>' +
                    '<div class="col-sm-10">' +
                    '<label class="checkbox-inline"><input type="checkbox"  id="owner_r"> 读取 </label>' +
                    '<label class="checkbox-inline"><input type="checkbox"  id="owner_w"> 写入 </label>' +
                    '<label class="checkbox-inline"><input type="checkbox"  id="owner_x"> 执行 </label>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group"><label class="col-sm-2 control-label">用户组</label>' +
                    '<div class="col-sm-10"><label class="checkbox-inline">' +
                    '<input type="checkbox"  id="group_r"> 读取 </label> <label class="checkbox-inline">' +
                    '<input type="checkbox"  id="group_w"> 写入 </label> <label class="checkbox-inline">' +
                    '<input type="checkbox"  id="group_x"> 执行 </label></div>' +
                    '</div>' +
                    '<div class="form-group"><label class="col-sm-2 control-label">公共</label>' +
                    '<div class="col-sm-10"><label class="checkbox-inline">' +
                    '<input type="checkbox"  id="public_r"> 读取 </label> <label class="checkbox-inline">' +
                    '<input type="checkbox"  id="public_w"> 写入 </label> <label class="checkbox-inline">' +
                    '<input type="checkbox"  id="public_x"> 执行 </label></div>' +
                    '</div>' +
                    '<div class="form-group" style="margin-left:30px;">' +
                    '<button type="button" class="btn btn-danger btn-sm" onclick="layer.closeAll()">取消</button> ' +
                    '<button type="button" id="set-chmod" class="btn btn-success btn-sm">确定</button></div>' +
                    '</div>'
            });
            let idName = ['owner', 'group', 'public'];
            for (let n = 0; n < idName.length; n++) {
                switch (chmod[n]) {
                    case '1':
                        $("#" + idName[n] + "_x").prop('checked', true);
                        break;
                    case '2':
                        $("#" + idName[n] + "_w").prop('checked', true);
                        break;
                    case '3':
                        $("#" + idName[n] + "_x").prop('checked', true);
                        $("#" + idName[n] + "_w").prop('checked', true);
                        break;
                    case '4':
                        $("#" + idName[n] + "_r").prop('checked', true);
                        break;
                    case '5':
                        $("#" + idName[n] + "_r").prop('checked', true);
                        $("#" + idName[n] + "_x").prop('checked', true);
                        break;
                    case '6':
                        $("#" + idName[n] + "_r").prop('checked', true);
                        $("#" + idName[n] + "_w").prop('checked', true);
                        break;
                    case '7':
                        $("#" + idName[n] + "_r").prop('checked', true);
                        $("#" + idName[n] + "_w").prop('checked', true);
                        $("#" + idName[n] + "_x").prop('checked', true);
                        break;
                }
            }
            $("#set-chmod").click(function () {
                // 发送请求
                let qs = "";
                for (let n = 0; n < idName.length; n++) {
                    let x = 0;
                    let r = 0;
                    let w = 0;
                    if ($("#" + idName[n] + "_r")[0].checked === true) {
                        r = 4
                    }
                    if ($("#" + idName[n] + "_w")[0].checked === true) {
                        w = 2
                    }
                    if ($("#" + idName[n] + "_x")[0].checked === true) {
                        x = 1
                    }
                    console.log(r, w, x);
                    // console.log(1,w + r + x);
                    // console.log(2,String(w + r + x));
                    qs += String(r + w + x);
                }
                // 如果和原来的权限相等则不发送修改
                if (qs !== chmod) {
                    layer.closeAll();
                    // 发送请求修改
                    $.ajax({
                        headers: {"X-CSRFToken": csrf},
                        url: "/dir/api/v1/set-chmod/",
                        type: "POST",
                        data: {"path_name": fileName, "chmod": qs},
                        success: function (result) {
                            // 返回200 的时候遍历
                            if (result.code === 200) {
                                swal("权限", "权限修改成功", "success")
                            } else {
                                swal("错误", "请不要花样作死", "error")
                            }
                        }
                    });
                } else {
                    qs = "";
                    layer.closeAll()
                }
            })
        }

        // 删除文件文件夹
        function delFile(file_path) {
            swal({
                title: "你确定删除吗",
                text: "你确定删除吗",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    headers: {"X-CSRFToken": csrf},
                    url: "/dir/api/v1/delete/",
                    type: "POST",
                    data: {"path_name": file_path}
                }).done(function (result) {
                    // 返回200 的时候遍历
                    if (result.code === 200) {
                        swal("删除", "删除成功\n删除文件再回收站可找到", "success");
                        go_dirs()
                    } else {
                        swal("错误", "请不要花样作死\n原因:" + result.error, "error")
                    }
                })
            })
        }

        // 图片预览
        // 点击后可查看文件
        var img_path = undefined;

        function imgShow(file_path) {
            $.ajax({
                headers: {"X-CSRFToken": csrf},
                url: "/dir/api/v1/show-img/",
                type: "POST",
                data: {"path_name": file_path}
            }).done(function (result) {
                // 返回200 的时候遍历
                if (result.code === 200) {
                    img_path = result.data;
                    var preimg = layer.open({
                        <!--在此处加载csrf_token-->
                        type: 1,
                        area: "600px",
                        title: "文件预览",
                        closeBtn: 2,
                        shift: 5,
                        shadeClose: false,
                        content: "<img src='/static/" + img_path + "' style='width:60%'>"
                    });
                } else {
                    swal("错误", "图片打开失败", "error")
                }
            });
        }
    </script>
{% endblock %}